<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>h5demo</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		
	</head>
	<body>
		
		<div class="web">
			<audio autoplay="autoplay" loop="loop">
				<source src="audio/Maroon5-Payphone.mp3" type="audio/mp3"/>
			</audio>
			<div class="swiper-container">
				<div class="swiper-wrapper">
				<div class="swiper-slide page page1">
					
					<div class="bgcontent">
					<div class="ani audeo_icon" swiper-animate-effect="audeo_icon" swiper-animate-duration="3s" ><img src="img/audeo_icon.png" alt="" /></div>
					<div class="bgcontent-left ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.2s" swiper-animate-delay="0.2s">
						<img src="img/bgcontent-left.png"/>	
					</div>
					<div class="bgcontent-right ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.2s">
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.2s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.4s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.6s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.8s"><img src="img/bgcontent-right.png"/></div>
					</div>
					<div class="ani feiji" swiper-animate-effect="zoomIn" swiper-animate-duration="2.2s" swiper-animate-delay="4.0s"><img src="img/feiji.png"/></div>
					<div class="ani feiji2" swiper-animate-effect="zoomIn" swiper-animate-duration="2.2s" swiper-animate-delay="4.4s"><img src="img/feiji2.png"/></div>
					<div class="ani qing" swiper-animate-effect="bounceInDown" swiper-animate-duration="2.2s" swiper-animate-delay="1.4s"><img src="img/qing.png"/></div>
					<div class="ani chun" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2.2s" swiper-animate-delay="1.6s"><img src="img/chun.png"/></div>
					<div class="ani ji" swiper-animate-effect="bounceInRight" swiper-animate-duration="2.2s" swiper-animate-delay="1.8s"><img src="img/ji.png"/></div>
					<div class="ani nian" swiper-animate-effect="bounceInUp" swiper-animate-duration="2.2s" swiper-animate-delay="2.0s"><img src="img/nian.png"/></div>
					<div class="ani ce" swiper-animate-effect="bounceIn" swiper-animate-duration="2.2s" swiper-animate-delay="2.2s"><img src="img/ce.png"/></div>
					<div class="jieshao ani" swiper-animate-effect="rollIn" swiper-animate-duration="2.2s" swiper-animate-delay="2.8s"><img src="img/jieshao.png"/></div>
					
					</div>
					<div class="bgbottom ani" swiper-animate-effect="bounceIn" swiper-animate-duration="2.2s" swiper-animate-delay="3.2s"><img src="img/bgbottom.png"/></div>
				</div>
				<div class="swiper-slide page page2">
					<div class="bgcontent">
					<div class="ani audeo_icon" swiper-animate-effect="audeo_icon" swiper-animate-duration="3s" ><img src="img/audeo_icon.png" alt="" /></div>
					<div class="bgcontent-left ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.2s" swiper-animate-delay="0.2s">
						<img src="img/bgcontent-left.png"/>	
					</div>
					<div class="bgcontent-right ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.2s">
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.2s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.4s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.6s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.8s"><img src="img/bgcontent-right.png"/></div>
					</div>
					<div class="bggua1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2.2s" swiper-animate-delay="1.2s">
						<div class="bgguaimg1 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1.2s" swiper-animate-delay="3.4s"><img src="img/bggua1.jpg"/></div>
						<div class="bgguaimg2 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1.2s" swiper-animate-delay="3.6s"><img src="img/bggua1.jpg"/></div>
						<div class="bgguaimg3 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1.2s" swiper-animate-delay="3.8s"><img src="img/bggua1.jpg"/></div>
					</div>
					<div class="bggua2 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2.2s" swiper-animate-delay="4.0s">
						<div class="bgguaimg4 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1.2s" swiper-animate-delay="6.2s"><img src="img/bggua1.jpg"/></div>
						<div class="bgguaimg5 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1.2s" swiper-animate-delay="6.4s"><img src="img/bggua1.jpg"/></div>
						<div class="bgguaimg6 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1.2s" swiper-animate-delay="6.6s"><img src="img/bggua1.jpg"/></div>
					</div>
					
					<span id="guamsg" class="ani" swiper-animate-effect="rotateIn" swiper-animate-duration="1.2s" swiper-animate-delay="7.0s">
						世界上原来真的有很多很多种人，用五花八门的方式生活着，他们让这个世界显得纷繁复杂又有趣。
					</span>
					<div class="icon_feiji ani" swiper-animate-effect="icon_feiji" swiper-animate-duration="2.2s" swiper-animate-delay="7.4s"><img src="img/icon_feiji.png"/></div>
					</div>
				</div>
				<div class="swiper-slide page page3">
					<div class="bgcontent">
					<div class="ani audeo_icon" swiper-animate-effect="audeo_icon" swiper-animate-duration="3s" ><img src="img/audeo_icon.png" alt="" /></div>
					<div class="bgcontent-left ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.2s" swiper-animate-delay="0.2s">
						<img src="img/bgcontent-left.png"/>	
					</div>
					<div class="bgcontent-right ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.2s">
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.2s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.4s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.6s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.8s"><img src="img/bgcontent-right.png"/></div>
					</div>
					<div class="bgtank ani" swiper-animate-effect="bgtank">
						<div class="tank"><img src="img/tank.jpg"/></div>
					</div>
					<div class="qiqiu ani" swiper-animate-effect="qiqiu"><img src="img/qiqiu.png"/></div>
					<span id="lvxing" class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2.2s" swiper-animate-delay="3.6s">
						旅行就是，离开自以为是的生活，串联起以前的回忆，并以开放的态度结识，日常生活之外的有趣之人，至于风景，那只是附庸品。
					</span>
					
					<div class="lvxingimg1 ani" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="2.2s" swiper-animate-delay="4.0s"><img src="img/lvxing_bottom.png"/></div>
					<div class="lvxingimg2 ani" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="2.2s" swiper-animate-delay="4.2s"><img src="img/lvxing_bottom.png"/></div>
					<div class="lvxingimg3 ani" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="2.2s" swiper-animate-delay="4.4s"><img src="img/lvxing_bottom.png"/></div>
					</div>
				</div>
				
				<div class="swiper-slide page page4">
					<div class="bgcontent">
					<div class="ani audeo_icon" swiper-animate-effect="audeo_icon" swiper-animate-duration="3s" ><img src="img/audeo_icon.png" alt="" /></div>
					<div class="bgcontent-left ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.2s" swiper-animate-delay="0.2s">
						<img src="img/bgcontent-left.png"/>	
					</div>
					<div class="bgcontent-right ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.2s">
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.2s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.4s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.6s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.8s"><img src="img/bgcontent-right.png"/></div>
					</div>
					<div class="travelimg1 ani" swiper-animate-effect="travelimg1"><img src="img/travelimg1.png"/></div>
					<div class="travelimg2 ani" swiper-animate-effect="travelimg2"><img src="img/travelimg2.png"/></div>
					<div class="travelimg3 ani" swiper-animate-effect="travelimg3"><img src="img/travelimg2.png"/></div>
					<div class="travelimg4 ani" swiper-animate-effect="travelimg4"><img src="img/travelimg3.png"/></div>
					<div class="travelimg5 ani" swiper-animate-effect="travelimg5"><img src="img/travelimg3.png"/></div>
					<div class="travelimg6 ani" swiper-animate-effect="travelimg6"><img src="img/travelimg3.png"/></div>
					<div class="travelimg7 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="3.2s"><img src="img/icon_travel.png"/></div>
					</div>
					
				</div>
				<div class="swiper-slide page page5">
					<div class="bgcontent">
					<div class="ani audeo_icon" swiper-animate-effect="audeo_icon" swiper-animate-duration="3s" ><img src="img/audeo_icon.png" alt="" /></div>
					<div class="bgcontent-left ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.2s" swiper-animate-delay="0.2s">
						<img src="img/bgcontent-left.png"/>	
					</div>
					<div class="bgcontent-right ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.2s">
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.2s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.4s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.6s"><img src="img/bgcontent-right.png"/></div>
						<div class="icon_img ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="0.8s"><img src="img/bgcontent-right.png"/></div>
					</div>
					
					<span id="zhendimsg" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="1s">
						旅行的真谛，不是运动，而是带动你的灵魂，去寻找到生命的春光。
					</span>
					<div class="zhendiimg1 ani" swiper-animate-effect="flipInY" swiper-animate-duration="2.2s" swiper-animate-delay="1.2s"><img src="img/travelimg3.png"/></div>
					<div class="zhendiimg2 ani" swiper-animate-effect="flipInY" swiper-animate-duration="2.2s" swiper-animate-delay="1.4s"><img src="img/travelimg1.png"/></div>
					<div class="zhendiimg3 ani" swiper-animate-effect="flipInX" swiper-animate-duration="2.2s" swiper-animate-delay="1.6s"><img src="img/zhendiimg1.png"/></div>
					<div class="zhendiimg4 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.2s" swiper-animate-delay="1.8s"><img src="img/zhendiimg6.png"/></div>
					</div>	
				</div>
				</div>
			</div>
		</div>
		
		
		
		
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>
		<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
		<script type="text/javascript" src="js/640commen.js"></script>
		<script type="text/javascript">
			var swiper = new Swiper('.swiper-container',{
				direction:'vertical',
				loop : true,
				 onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    			swiperAnimateCache(swiper); //隐藏动画元素 
    			swiperAnimate(swiper); //初始化完成开始动画
  				}, 
  				onSlideChangeEnd: function(swiper){ 
    			swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
 				 } 
			})
			
		</script>
	</body>
</html>
